<template>
  <div class="chart-comp">
    <div  ref="chart" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script>

export default {
  props: {
    options: {
      type: Object,
      require: true,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data () {
    return {
      myChart: null
    }
  },
  watch: {
    option: {
      handler () {   
        this.initData()
      },
      deep:true
    }
  },
  mounted () {
    this.$nextTick(()=>{
      this.initData()
    })
      
  },
  methods: {
    initData () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(this.$refs.chart);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(this.options)
        
        // 图表自适应
        window.addEventListener('resize', () => {
          myChart.resize()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-comp {
  height: 100%;
  width: 100%;
}
</style>

